<template>
	<view class="history">
		<view class="top">
			<text class="title">播放历史记录</text>
			<text class="delAll" @click="delAll">全部清空</text>
		</view>
		<steps v-if="playHistoryListData.length>0" color='#fff' backgroundColor='rgb(216, 30, 6)'
			:infoList="playHistoryListData" @click="goPlayer" @del="del"></steps>
		<view class="NoPlayHistoryText" v-else>当前没有任何播放记录</view>
	</view>
</template>

<script>
	import api from '@/api/index.js'
	import steps from '@/components/steps.vue'
	export default {
		data() {
			return {
				playHistoryListData: []
			}
		},
		components: {
			steps
		},
		onShow() {
			this.getPlayHistoryList()
		},
		methods: {
			async getPlayHistoryList() {
				this.playHistoryListData = await api.playHistoryListData()
			},
			goPlayer(id) {
				console.log(id)
				uni.navigateTo({
					url: '../detail/detail?id=' + id
				});
			},
			del(id) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '点击确定将删除此历史信息，确定删除吗？',
					success: function(res) {
						if (res.confirm) {
							api.delPlayHistoryData(id)
							that.getPlayHistoryList()
						} else if (res.cancel) {

						}
					}
				});
			},
			delAll() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '点击确定将删除所有历史信息，确定删除吗？',
					success: function(res) {
						if (res.confirm) {
							uni.setStorage({
								key: 'play_history_list',
								data: []
							});
							that.getPlayHistoryList()
						} else if (res.cancel) {

						}
					}
				});
			}
		}
	}
</script>

<style scoped>
	.history {}

	.history .top {
		padding: 25rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.history .top .title {
		font-size: 30rpx;
		font-weight: 600;
	}

	.history .top .delAll {
		font-size: 26rpx;
		color: #BFC7D3;
	}

	.history .NoPlayHistoryText {
		padding: 0 25rpx;
		font-size: 26rpx;
		color: #BFC7D3;
	}
</style>
